<template>
  <div class="homepage-hero-module">
    <div class="video-container">
      <div :style="fixStyle" class="filter">
        <div>
          <div style="margin-top: 7%">
            <van-image
                round
                width="10rem"
                height="10rem"
                :src="imgs"
            />

          </div>
          <div style="margin-top: 20px;margin-left: 30%;margin-right: 30%">
            <van-tabs v-model:active="active" background="transparent" >
              <van-tab title="账号密码登录" class="login-tab"  >
                <div style="margin-left: 20%;margin-right: 15%">
                  <van-cell-group inset style="margin-top: 20px;">
                    <van-field
                        v-model="user1.name"
                        label="用户名"
                        placeholder="用户名/手机号"
                        :rules="[{ required: true, message: '请填写用户名或手机号' }]"
                    />
                  </van-cell-group>
                    <van-cell-group inset style="margin-top: 20px;">
                    <van-field
                        v-model="user1.password"
                        type="password"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                    />
                  </van-cell-group>
                  <div style="margin: 16px;">
                    <van-button round block type="primary" @click="loginName()">
                      登录
                    </van-button>
                  </div>
                </div>
              </van-tab>
              <van-tab title="短信验证码登录" >
                <div style="margin-left: 20%;margin-right: 15%;margin-top: 20px;" >
                  <!-- 可以使用 CellGroup 作为容器 -->
                  <van-cell-group inset>
                    <van-field v-model="user2.name" label="手机号：" placeholder="手机号" @change="checkPhone()"/>
                  </van-cell-group>
                    <van-cell-group inset style="margin-top: 20px;">
                      <van-field
                        v-model="user2.password"
                        center
                        clearable
                        label="短信验证码"
                        placeholder="请输入短信验证码"
                    >
                      <template #button>
                        <van-button size="small" type="primary" :disabled="btn1" @click="sendCode()">发送验证码</van-button>
                      </template>
                    </van-field>
                  </van-cell-group>
                    <div style="margin: 16px;">
                      <van-button round block type="success" @click="loginCode()">
                        登录
                      </van-button>
                    </div>
                </div>
              </van-tab>
            </van-tabs>
          </div>
          <div >
            <!-- 居中 -->
            <van-row justify="center" style="margin-top: 10px" >
              <van-col span="4" ><router-link to="/register">注册账号</router-link></van-col>
              <van-col span="4"><router-link to="/find">忘记密码</router-link></van-col>
            </van-row>
          </div>
        </div>
        <!--内容-->
      </div>
      <video :style="fixStyle" autoplay loop muted class="fillWidth" v-on:canplay="canplay">
        <source src="../assets/video/Video1.mp4" type="video/mp4"/>
      </video>
    </div>
  </div>

</template>

<script>
export default {
  name: "LoginView",
  data(){
    return{
      imgs:require("../assets/images/imgs-tx.png"),
      active:0,
      btn1:true,
      user1:{//账号密码
        name:"",
        password:"",
        city: "郑州",
        mobie: "华为"
      },
      user2:{//手机号验证码
        name:"",
        password:"",
        city: "郑州",
        mobie: "小米"
      },
      vedioCanPlay: false,
      fixStyle: ''
    }
  },
  methods:{
    loginName(){
      //账号密码登录
      this.axios.post("api/user/loginname.do",this.user1).then((r)=>{
        if(r.data.code==200){

          this.$store.commit("setToken",r.data.data);
          //成功 跳转到首页
          this.$router.push("/home");
        }else {
          this.$toast(r.data.msg);
        }
      })
    },
    checkPhone(){
      //校验手机号是否存在
      this.axios.get("/api/user/checkphone.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=false;
        }else {
          this.btn1=true;
          this.$toast("亲，你不知道手机号根本没有注册！");
        }
      })
    },
    sendCode(){
      //发送验证码
      this.axios.get("/api/sms/sendlogin.do?phone="+this.user2.name).then((r)=>{
        if(r.data.code==200){
          //存在  可以发送验证码
          this.btn1=true;
          this.$toast("亲，验证码发送成功，请查看手机！");
        }else {
          this.btn1=false;
          this.$toast("亲，手机是不是欠费！");
        }
      })
    },
    loginCode(){
      //验证码登录
      this.axios.post("api/user/logincode.do",this.user2).then((r)=>{
        if(r.data.code==200){
          this.$store.commit("setToken",r.data.data);
          //成功 跳转到首页
          this.$router.push("/home");
        }else {
          this.$toast(r.data.msg);
        }
      })
    },
    canplay() {
      this.vedioCanPlay = true
    }
  },mounted: function() {   //屏幕自适应
    window.onresize = () => {
      const windowWidth = document.body.clientWidth
      const windowHeight = document.body.clientHeight
      const windowAspectRatio = windowHeight / windowWidth
      let videoWidth
      let videoHeight
      if (windowAspectRatio < 0.5625) {
        videoWidth = windowWidth
        videoHeight = videoWidth * 0.5625
        this.fixStyle = {
          height: windowWidth * 0.5625 + 'px',
          width: windowWidth + 'px',
          'margin-bottom': (windowHeight - videoHeight) / 2 + 'px',
          'margin-left': 'initial'
        }
      } else {
        videoHeight = windowHeight
        videoWidth = videoHeight / 0.5625
        this.fixStyle = {
          height: windowHeight + 'px',
          width: windowHeight / 0.5625 + 'px',
          'margin-left': (windowWidth - videoWidth) / 2 + 'px',
          'margin-bottom': 'initial'
        }
      }
    }
    window.onresize()
  }
}
</script>

<style scoped>

.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.video-container .poster img{
  z-index: 0;
  position: absolute;
}

.video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}


.fillWidth {
  width: 100%;
}

</style>
